<template>
  <form-data
    ref="formData"
    :formItems="formItems"
    :initData="initData"
    :itemLabelWidth="110"
    :configs="{ showHoverMsg: false }"
  >
  </form-data>
</template>
<script>
export default {
  props: {
    appInfo: {
      type: Object,
      default: {}
    },
    dataInfo: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      initData: {
        appCode: this.appInfo.appCode,
        controlBehavior: 0,
        count: 0,
        grade: 0,
        id: '',
        limitApp: 'default',
        maxQueueingTimeMs: 0,
        refResource: '',
        resource: this.appInfo.resource,
        resourceType: this.appInfo.resourceType,
        routeId: this.appInfo.routeId,
        strategy: 0,
        tenantCode: this.appInfo.tenantCode,
        warmUpPeriodSec: 0
      },
      formItems: [
        {
          type: 'string',
          required: true,
          title: this.$t('module.apiManage.APIResource'),
          key: 'resource',
          maxlength: 256,
          disabled: true,
          colSpan: 24
        },
        {
          type: 'radio',
          title: this.$t('module.apiManage.thresholdType'),
          key: 'grade',
          radios: [
            { label: this.$t('module.apiManage.concurrentThreads'), value: 0 },
            { label: 'QPS', value: 1 }
          ]
        },
        {
          type: 'number',
          required: true,
          title: this.$t('module.apiManage.SingleThreshold'),
          key: 'count',
          min: 0,
          max: 2147483647
        },
        {
          type: 'radio',
          title: this.$t('module.apiManage.strategy'),
          key: 'strategy',
          radios: [
            { label: this.$t('module.apiManage.direct'), value: 0 },
            { label: this.$t('module.apiManage.association'), value: 1 }
          ],
          show: form => {
            //当流控模式是关联时，显示
            return form.grade === 1
          },
          colSpan: 24
        },
        {
          type: 'string',
          required: true,
          title: this.$t('module.apiManage.refResource'),
          key: 'refResource',
          placeholder: this.$t('module.apiManage.placeholder.pleaseEnter') + this.$t('module.apiManage.refResource'),
          maxlength: 256,
          show: form => {
            //当流控模式是关联时，显示
            return form.strategy === 1 && form.grade === 1
          },
          colSpan: 24
        },
        {
          type: 'radio',
          title: this.$t('module.apiManage.controlBehavior'),
          key: 'controlBehavior',
          show: form => {
            //当阈值类型为QPS才显示
            return form.grade === 1
          },
          radios: [
            { label: this.$t('module.apiManage.failFast'), value: 0 },
            { label: this.$t('module.apiManage.warmUp'), value: 1 },
            { label: this.$t('module.apiManage.Queue'), value: 2 }
          ],
          colSpan: 24
        },
        {
          type: 'InputNumberWithUnit',
          required: true,
          number: true,
          title: this.$t('module.apiManage.warmUpPeriodSec'),
          key: 'warmUpPeriodSec',
          show: form => {
            //当流控效果为预热才显示
            return form.controlBehavior === 1 && form.grade === 1
          },
          props: {
            min: 0,
            max: 2147483647,
            placeholder: this.$t('module.apiManage.placeholder.pleaseEnter'),
            append: this.$t('module.apiManage.unitSec')
          }
        },
        {
          type: 'InputNumberWithUnit',
          required: true,
          number: true,
          title: this.$t('module.apiManage.maxQueueingTimeMs'),
          key: 'maxQueueingTimeMs',
          show: form => {
            //当流控效果为预热才显示
            return form.controlBehavior === 2 && form.grade === 1
          },
          props: {
            min: 0,
            max: 2147483647,
            placeholder: this.$t('module.apiManage.placeholder.pleaseEnter'),
            append: this.$t('module.apiManage.unitMs')
          }
        }
      ],
      actions: [
        {
          text: this.$t('common.confirm'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.cancel'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created() {
    if (this.dataInfo) {
      this.initData = this.dataInfo
      this.$emit('SetTitle', this.$t('module.apiManage.editAPILimiting'))
    } else {
      this.$emit('SetTitle', this.$t('module.apiManage.createAPILimiting'))
    }
    this.$emit('SetPageWidth', 700)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    save() {
      this.$refs.formData.validateDataPromise().then(param => {
        const action = !!this.dataInfo ? 'updateFlowRule' : 'addFlowRule'
        window.$http.post(`${window.RPConfig.mgt}/api/` + action, param).then(res => {
          this.$message.success({
            content: this.$t(`common.${!this.dataInfo ? 'addSuccess' : 'updateSuccess'}`),
            duration: 3
          })
          this.$emit('Close', true)
        })
      })
    }
  }
}
</script>
<style scoped></style>
